<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>安居客</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			.wrapper {
				width: 100%;
			}
			.header {
				position: fixed;
				top: 0;
				width: 100%;
				height: 88px;
				z-index: 1;
				background-color: rgb(51, 204, 51);
			}
			.icon {
				position: absolute;
				top: 5%;
				width: 100%;
				height: 44px;
				color: white;
				text-align: center;
				font-size: small;
			}
			.title {
				display: inline-block;
				width: 100px;
				height: 44px;
				line-height: 33px;
				color: white;
				font-size: x-large;
				font-weight: bolder;
				transform: scale(1.5, 1);
			}
			.icon1,
			.icon2 {
				position: absolute;
				top: 8px;
				width: 53px;
				height: 20px;
				text-align: center;
				line-height: 20px;
			}
			.icon1 {
				left: 6%;
			}
			.icon2 {
				right: 6%;
			}
			.icon1 img,
			.icon2 img {
				width: 13px;
			}
			.search {
				width: 90%;
				height: 30px;
				background-color: white;
				position: absolute;
				top: 50%;
				left: 4.5%;
				border: 1px solid white;
				border-radius: 15px;
				text-align: center;
				font-size: small;
			}
			.search-img1,
			.search-img2 {
				position: absolute;
				top: 8px;
				width: 13px;
				height: 13px;
			}
			.search-word {
				display: inline-block;
				width: 120px;
				margin-left: 10px;
				margin-top: 8px;
			}
			.content {
				position: absolute;
				top: 88px;
				width: 100%;
			}
			.box {
				float: left;
				width: 25%;
				height: 85px;
				font-size: small;
			}
			.box img {
				display: block;
				height: 40px;
				padding-top: 10px;
				margin: auto;
				/*margin-left: 30%;*/
				/*text-align: center;对于img不管用的属性*/
			}
			.box div {
				margin-top: 4px;
				/*margin-left: 30%;*/
				
				text-align: center;
			}
			.link {
				width: 100%;
				height: 170px;
				border-bottom: 10px solid rgb(242, 242, 242);
			}
			.price {
				width: 100%;
				height: 85px;
				border-bottom: 10px solid rgb(242, 242, 242);
			}
			.info {
				width: 100%;
			}
			.small-title {
				width: 100%;
				height: 40px;
				padding-left: 10px;
				border-left: 3px solid rgb(0, 128, 0);
				border-bottom: 1px solid rgb(242, 242, 242);
				color: rgb(173, 173, 173);
				line-height: 40px;
				font-size: 14px;
			}
			.mod {
				width: 100%;
				height: 80px;
				margin: 10px;
				margin-bottom: 0;
				padding-bottom: 10px;
				border-bottom: 1px solid rgb(242, 242, 242);
			}
			.mod img {
				float: left;
				width: 100px;
				height: 80px;
			}
			.dtl-info {
				position: relative;
				/*float: left;*/
				/*display: inline-block;*/
				
				height: 80px;
			}
			.dtl-info h3 {
				margin: 0;
				margin-left: 110px;
			}
			.price-num {
				position: absolute;
				right: 20px;
				top: 20px;
				color: rgb(229, 79, 7);
				font-size: large;
			}
			.add {
				position: absolute;
				top: 22px;
				left: 110px;
				color: rgb(167, 167, 167);
			}
			.keyword {
				position: absolute;
				top: 43px;
				left: 110px;
				color: rgb(167, 167, 167);
			}
			.keyword p {
				display: inline-block;
				margin: 0;
				border: 1px solid rgb(222, 222, 222);
				font-size: 14px;
				margin-top: -3px;
				margin-right: 3px;
				border-radius: 4px;
				padding: 2px;
			}
			.wait {
				position: absolute;
				top: 65px;
				left: 110px;
				color: rgb(139, 138, 143);
				font-size: 15px;
			}
			.footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 55px;
				border-top: 1px solid rgb(242, 242, 242);
				background-color: white;
			}
			.f-box {
				float: left;
				width: 25%;
				height: 55px;
				text-align: center;
				font-size: 13px;
			}
			.f-box img {
				width: 30px;
			}
			.msg-icon1 {
				position: absolute;
				top: 4px;
				left: 38%;
				width: 8px;
				height: 8px;
				background-size: 8px 8px;
				background-image: url("icons/comm_hometab_bg_newmsg.9.png");
			}
			.msg-icon2 {
				position: absolute;
				top: 4px;
				left: 63%;
				width: 8px;
				height: 8px;
				background-size: 8px 8px;
				background-image: url("icons/comm_hometab_bg_newmsg.9.png");
			}
		</style>
		<style>
			#xinfang:after {
				background: url("icons/comm_homepage_icon_xf.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#ershoufang:after {
				background: url("icons/comm_homepage_icon_esf.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#zufang:after {
				background: url("icons/comm_homepage_icon_zf.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#shangpu:after {
				background: url("icons/comm_homepage_icon_sydc.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#bnzf:after {
				background: url("icons/comm_homepage_icon_bnzf.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#mf:after {
				background: url("icons/comm_homepage_icon_mf.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#dtzf:after {
				background: url("icons/comm_homepage_icon_sfd.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#xqfj:after {
				background: url("icons/comm_homepage_icon_fj.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#djyh:after {
				background: url("icons/djyh.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#mfkf:after {
				background: url("icons/mfkf.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#xyd:after {
				background: url("icons/xyd.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			#fczx:after {
				background: url("icons/fszx.png") 50% 50% no-repeat;
				background-size: 40px 40px;
			}
			.ui-btn-icon-top {
				padding-top: 4.5em !important;
			}
			.ui-icon-custom {
				font-size: small !important;
				border: none !important;
				background-color: white !important;
			}
			.ui-icon-custom:after {
				width: 40px !important;
				height: 40px !important;
				margin-left: -20px !important;
			}
			/*:active表示正在点击时显示的样式，-active表示点击之后显示的样式*/
			/*两个class名之间用空格隔开表示父元素下的子元素的意思，不用空格隔开表示元素需同时拥有两个类名才会运用样式*/
			
			.nav-glyphish-example .ui-btn:active,
			.nav-glyphish-example .ui-btn.ui-btn-active {
				-webkit-box-shadow: none !important;
				box-shadow: none !important;
				text-shadow: none !important;
				color: black !important;
			}
			.nav-glyphish-example .ui-btn:hover {
				background-color: white;
			}
			.space {
				height: 10px;
			}
			/*navbarEND*/
			
			.ui-listview .ui-li-has-thumb > .ui-btn > img{
				left: 10px !important;
				top: 10px !important;
				height: 80px !important;
				max-width: 100px !important;
				text-shadow: none !important;
			}
			.ui-listview > li h2{
				font-size: 18px !important;
				margin-top: 1px !important;
				margin-left: 20px !important;
				margin-bottom: 1px !important;
			}
			.ui-listview > li p{
				margin-top: 0 !important;
				margin-bottom: 0 !important;
				color: rgb(167,167,167) !important;
			}
			.p1{
				margin-left: 1.2em !important;
				font-size: 1em !important;
			}
			.p2{
				margin-left: 1.7em !important;
				font-size: .7em !important;
			}
		</style>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
	</head>

	<body>
		<div class="wrapper">
			<div class="header">
				<div class="icon">
					<div class="icon1">
						<a><span>深圳</span></a>
						<img src="icons/arrow_b.png" />
					</div>
					<span class="title">安居客</span>
					<div class="icon2">
						<img src="icons/map.png" />
						<a><span>地图</span></a>
					</div>
				</div>
				<div class="search">
					<img src="icons/search.png" class="search-img1" />
					<div class="search-word">搜好房,上安居客</div>
					<img src="icons/scan.png" class="search-img2" />
				</div>
			</div>
			<div class="content">
				<div data-role="navbar" class="nav-glyphish-example" data-theme="a">
					<ul>
						<!--data-icon = "custom"相当于 给元素添加一个class，名为ui-icon-custom-->
						<li><a href="#" id="xinfang" data-icon="custom">新房</a></li>
						<li><a href="#" id="ershoufang" data-icon="custom">二手房</a></li>
						<li><a href="#" id="zufang" data-icon="custom">租房</a></li>
						<li><a href="#" id="shangpu" data-icon="custom">商铺写字楼</a></li>
					</ul>
				</div>
				<div data-role="navbar" class="nav-glyphish-example" data-theme="a">
					<ul>
						<li><a href="#" id="bnzf" data-icon="custom">帮你找房</a></li>
						<li><a href="#" id="mf" data-icon="custom">卖方</a></li>
						<li><a href="#" id="dtzf" data-icon="custom">地图找房</a></li>
						<li><a href="#" id="xqfj" data-icon="custom">小区房价</a></li>
					</ul>
				</div>

				<!--<div class="link">
                   <div class="box">
                       <img src="icons/comm_homepage_icon_xf.png">
                       <div>新房</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_esf.png">
                       <div>二手房</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_zf.png">
                       <div>租房</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_sydc.png">
                       <div>商铺写字楼</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_bnzf.png">
                       <div>帮你找房</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_mf.png">
                       <div>卖方</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_sfd.png">
                       <div>地图找房</div>
                   </div>
                   <div class="box">
                       <img src="icons/comm_homepage_icon_fj.png">
                       <div>小区房价</div>
                   </div>
               </div>-->
				<div class="space"></div>
				<div class="price">
					<div data-role="navbar" class="nav-glyphish-example" data-theme="a">
						<ul>
							<li><a href="#" id="djyh" data-icon="custom">独家优惠</a></li>
							<li><a href="#" id="mfkf" data-icon="custom">免费看房</a></li>
							<li><a href="#" id="xyd" data-icon="custom">信用贷</a></li>
							<li><a href="#" id="fczx" data-icon="custom">房产资讯</a></li>
						</ul>
					</div>
					<!--<div class="box">
						<img src="icons/djyh.png">
						<div>独家优惠</div>
					</div>
					<div class="box">
						<img src="icons/mfkf.png">
						<div>免费看房</div>
					</div>
					<div class="box">
						<img src="icons/xyd.png">
						<div>信用贷</div>
					</div>
					<div class="box">
						<img src="icons/fszx.png">
						<div>房产资讯</div>
					</div>-->
				</div>
				<div class="info">
					<div class="small-title">猜你喜欢</div>
					<div class="house-info">
						<div class="mod">
							<img src="icons/img0.jpg">
							<div class="dtl-info">
								<h3>南部湾万科城</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait" style="color: rgb(88,157,8);">6月1号看房</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img1.jpg">
							<div class="dtl-info">
								<h3>中粮云景国际</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img2.jpg">
							<div class="dtl-info">
								<h3>康达尔上海上城</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img3.jpg">
							<div class="dtl-info">
								<h3></h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img4.jpg">
							<div class="dtl-info">
								<h3>君成雍和园</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img5.jpg">
							<div class="dtl-info">
								<h3>宏发前城</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img6.jpg">
							<div class="dtl-info">
								<h3>碧海君庭</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img7.jpg">
							<div class="dtl-info">
								<h3>松茂御龙湾</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img8.jpg">
							<div class="dtl-info">
								<h3>华丰前海湾</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
						<div class="mod">
							<img src="icons/img9.jpg">
							<div class="dtl-info">
								<h3>幸福珺湾</h3>
								<span class="add">宝安-西乡</span>
								<span class="price-num">1700元/m<sup>2</sup></span>
								<div class="keyword">
									<p>精装修</p>
									<p>投资地产</p>
									<p>医院</p>
									<p>公园</p>
								</div>
								<span class="wait">待售</span>
							</div>
						</div>
					</div>
					<ul data-role="listview" data-inset="true">
						<li data-icon = "false">
							<a href="#" >
								<img src="icons/img9.jpg">
								<h2>幸福珺湾</h2>
								<p class="p1">宝安-西乡</p>
								<p class="p2">精装修</p>
								<p class="p1">待售</p>
								<span class="price-num">1700元/m<sup>2</sup></span>
							</a>
						</li>
					</ul>
					<div style="height: 53px"></div>
				</div>
			</div>
			<div class="footer">
				<div class="f-box">
					<img src="icons/comm_hometab_icon_house_slt.png">
					<div>首页</div>
				</div>
				<div class="f-box">
					<img src="icons/comm_hometab_icon_chat.png">
					<div class="msg-icon1"></div>
					<div>微聊</div>
				</div>
				<div class="f-box">
					<img src="icons/comm_hometab_icon_focus.png">
					<div class="msg-icon2"></div>
					<div>推荐</div>
				</div>
				<div class="f-box">
					<img src="icons/comm_hometab_icon_my.png">
					<div>我的</div>
				</div>
			</div>
		</div>
	</body>

</html>